<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style type="text/css">
        body {
			margin: 0;
			display: flex;
			margin: auto auto;
			min-width: 1520px;
		}
		.max_box{
			width: 1200px;
			height: 100vh;
			display: flex;
			margin: auto auto;
		}
		.login_bgc{
			width: 800px;
			height: 570px;
		}
		.login_bgc img{
			margin-top: 150px;
			width: 800px;
			height: 570px;
		}
		.login_loginBox {
			margin-top: 150px;
		    border: 1px solid #a0b1c4;
		    border-radius: 5px;
		    box-sizing: border-box;
		    overflow: hidden;
		    width: 368px;
		    background: white;
		    height: 570px;
		}
        .login_loginBox_tab {
            color: #2e3033;
            line-height: 1.5;
            background-color: #f9fbfe;
            border-bottom: 1px solid #c0cdd9;
            border-radius: 5px 5px 0 0;
            font-size: 0;
            height: 50px;
        }
        .login_tab_item {
            color: #959da6;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            width: 50%;
        }
		.login_tab_item:hover{
			color: #ffffff; /* 设置链接的触碰颜色 */
			background-color: #00bebd; /* 背景颜色 */
			transition: color 0.3s; /* 添加颜色变化的过渡效果 */
		}
        .login_tips {
            position: relative;
            height: 100%;
            top: 50%;
            margin-top: -166px;
        }
        .login_tips .tips {
            position: relative;
            margin: 0 auto 26px;
            line-height: 16px;
            color: #000;
            text-align: center;
        }

        .login_input {
            display: flex;
			margin: auto auto;
            flex-direction: column;
            align-items: center;
        }
        .login_input input {
            width: 70%;
            padding: 10px;
            margin-bottom: 10px;
			border-radius: 10px;
        }
		.login_btn {
		  display: flex; /* 使用 Flex 布局 */
		  margin: auto auto; /* 上下居中 */
		  margin-top: 30px; /* 顶部外边距 */
		  padding: 10px; /* 内边距 */
		  width: 184px; /* 宽度 */
		  color: #00a6a7; /* 文本颜色 */
		  border-radius: 8px; /* 边框圆角 */
		  background: rgba(0, 190, 189, 0.2); /* 背景颜色 */
		}
		
		.login_btn p {
		  margin: auto auto; /* 上下居中 */
		  font-size: 14px; /* 字体大小 */
		  font-weight: 400; /* 字体粗细 */
		}
		.login_btn p:hover, .login_btn:hover {
		  color: #ffffff; /* 设置链接的触碰颜色 */
		  background-color: #00bebd; /* 背景颜色 */
		  transition: color 0.3s; /* 添加颜色变化的过渡效果 */
		}
		.login_othbtn{
			display: flex;
			margin: auto auto;
			width: 184px; /* 宽度 */
		}
		.login_othbtn p{
			margin: 40px auto; /* 上下居中 */
		}
		.login_othbtn p:hover{
			color: #00bebd; /* 设置链接的触碰颜色 */
		}
    </style>
</head>
<body>
    <div class="max_box">
		<div class="login_bgc">
			<img src="https://ts1.cn.mm.bing.net/th/id/R-C.28afa5e3bc7e57255b7d1286935b7c56?rik=S16%2bViS3vanQmQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140609%2f1-140609210008.jpg&ehk=gpCGLkANIKcHX2cG0fLSjWpV0sr65vHQqBoAUm6FZOE%3d&risl=&pid=ImgRaw&r=0" >
		</div>
        <div class="login_loginBox">
            <div class="login_loginBox_tab">
                <div class="login_tab_item">用户登录</div>
                <div class="login_tab_item">商企登录</div>
            </div>
            <div class="login_tips">
                <div class="tips">
                    <p>欢迎登陆</p>
                    <p>祝你兼职快乐</p>
                </div>
				<div class="login_input">
				    <input type="text" name="account" placeholder="请输入账号">
				    <input type="password" name="password" placeholder="请输入密码">
				</div>
				<div class="login_btn" id="login_btn_btn"  onclick="skip_index()">
					<p>登录</p>
				</div>
				<div class="login_othbtn" id="login_btn_btn">
					<p onclick="skip_findpass()">忘记密码</p>
					<p onclick="skip_register()">注册</p>
				</div>
				<a href=""></a>
            </div>
        </div>
    </div>
	<script>
		function skip_index(){
			var account = document.getElementsByName("account")[0].value;
			var password = document.getElementsByName("password")[0].value;
			if(isTrue(account,password)){
				console.log("登录成功")
			}
			console.log("点击了")
		}
		function isTrue(account,password){
			if(account.length !== 0 && password.length !==0){
				if(account.includes(" ") || password.includes(" ")){
					console.log("请检查账号或密码内容是否合法");
					return false;
				}else{
					if(account.length < 6){
						return false;
						console.log("账号长度至少为六位数");
					}else if(password.length < 8){
						return false;
						console.log("密码长度至少为八位数");
					}else{
						return true;
					}
				}
			}else{
				console.log("账号或密码不能为空");
				return false;
			}
		}
		function skip_findpass(){
			// window.location.href='Changepass.html';
		}
		function skip_register(){
			// window.location.href='Register.html';
		}
	</script>
</body>
</html>
